<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
      <!--biaoti指的是props的值   如果使用v-bind:biaoti的话，里边的值需要时data的key-->
      <zujian biaoti="组件一1111"></zujian>
      <zujian biaoti="组件二2222"></zujian>
  </div>

<script>

    //组件是方法  第一个是组件名  第二个参数是一个对象，模板的内容
    Vue.component('zujian',{
            data(){
                //如果使用里边的属性的话，data需要改成方法  并且有返回值对象  在对象中来设置值
                 //这样有一个好处是  组件的属性不共用
                return{
                    count:0,
                }
            },
        props: ['biaoti'],//传递数据
        template: '<div><button v-on:click="count++">hello {{count}}!</button><div>{{biaoti}}</div></div>'
       }
    );

    var app =new Vue({
      el:"#app",
       data:{
          msg:"boy",
       }

    });




</script>

</body>
</html>